<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="jsoperate.css">
    <script>

        document.write("hello，js");
        document.getElementById("pid").innerHTML = "js修改p元素中的内容";//写在前面不生效
        function sum(a, b) {
            document.getElementById("pid").innerHTML = "计算结果:" + (a + b);
        }

        function operateDivCss() {
            document.getElementById("jsdiv").style.background = "#55aaff"
        }

        document.getElementById("jsdiv").addEventListener("click", function () {
            alert("点击事件")
        })
        document.getElementById("eventlistenerbtn").addEventListener("click", function () {
            alert("点击事件")
        })//和加载顺序有关

    </script>
    <script src="hellojs.js"></script>
</head>
<body onload="startTime()">
<p id="pid">hello</p>
<button onclick="sum(1,2)">函数练习</button>
<button onclick="operateDivCss()">修改div属性</button>
<button id="eventlistenerbtn">点击事件监听</button>
<br/>
<div id="jsdiv" class="div">

</div>
<div id="timeDiv" class="div" >

</div>
<script>

    document.getElementById("pid").innerHTML = "js修改p元素中的内容";//写在前面不生效
    const i = 10;
    let j = 3.1415926535897932
    let str = "哈哈哈"
    let person = {
        name: "张飞",
        age: 19,
        gender: "男",
        school: "清华"
    }
    document.writeln(person.name)
    document.getElementById("eventlistenerbtn").addEventListener("click", function () {
        alert("点击事件")
    })//设置几个都不覆盖用remove移除
    document.getElementById("jsdiv").onclick = function () {
        let date = new Date();
        this.innerHTML = "div的点击事件" + date.getTime()
    }//重新赋值就会被覆盖

    //对象创建
    function humen(name, age, gender) {
        this._name = name;
        this._age = age;
        this._gender = gender;
    }

    son = new humen("张宝", 13, "男")
    alert(son._age)


    function startTime() {
        let time = new Date();
        let h = time.getHours();
        let m = time.getMinutes();
        let s = time.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById("timeDiv").innerHTML = h + ":" + m + ":" + s;
        const count = setTimeout(function () {
            startTime()
        }, 1000);
    }

    function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
</script>
</body>
</html>
